JavaScript I. Introducere Limbajul JavaScript a fost introdus prima data in versiunea 2.0 a cunoscutului browser Netscape Navigator, intr-un efort al firmei Netscape de a extinde functionalitatea acestuia, oferind un limbaj de programare care poate fi plasat in interiorul paginilor web. Fondatorii sai au fost firmele Netscape si Sun Microsystems. JavaScript este un limbaj client-side inspirat din limbajul Java, menit sa ofere utilizatorilor si creatorilor de site-uri web, pagini web particularizate, validarea datelor (la client) inainte de a fi trimise la server (reducind astfel traficul pe retea), pagini generate dinamic, acces la elementele unui document html si totodata la elementele ferestrei navigatorului intr-un stil specific programarii orientate obiect, etc. JavaScript este un limbaj scriptural. Programele scrise intr-un limbaj scriptural se numesc scripturi. Scripturile sunt programe care nu sunt compilate ci interpretate linie cu linie in timp ce aplicatia ruleaza. JavaScript este un limbaj orientat obiect: intregul document html este privit ca si o colectie de obiecte (forme, butoane, textbox-uri, checkbox-uri, imagini, etc.) care pot fi referite prin numele lor. JavaScript este un limbaj orientat pe evenimente: JavaScript reactioneaza la diferitele evenimente care au loc asupra formei (click-uri pe butoane, introducere de text, etc.). Fiindca este inspirat din limbajul Java, JavaScript este independent de platforma si sigur (secure) - nu poate citi sau scrie date din/in nici un alt fisier de pe server (decat documentul in sine): principiul "sand-box" -. II. Elemente de baza JavaScript mosteneste de la Java tipurile de date, operatorii, structura generala a unui program, sintaxa instructiunilor, aspecte legate de securitate. JavaScript este un limbaj orientat-obiect. in JavaScript exista obiecte predefinite, dar se pot defini si obiecte noi. JavaScript importa de la Java clasele String, Math si Date si pe linga acestea mai are definite obiectele specifice browserului (navigator, window, location, history, document). JavaScript v1.3, ultima versiune, mai are in plus niste clase predefinite: Array, Boolean, Number, RegExp si Function. II.1. Valori, variabile si literali in JavaScript exista urmatoarele tipuri de valori (literali): * Numerele in JavaScript sunt de doua tipuri: numere intregi reprezentate in bazele 2, 8 si 16 (2, 300, 567, 045, 0x4AB4, ...) si numere reale (3.1415, .12, -123.4E30, -1.3e-3, ...) * Boolean: doar doua valori, true si false * null este o valoare nedefinita * undefined: o proprietate de nivel superior poate avea valoarea undefined * NaN: Not a Number * String: 'ceva', "alceva", "z\net", etc. Pentru orice literal de tip string se pot folosi metodele clasei String. JavaScript converteste automat literalul intr-un obiect String temporar, apeleaza metoda respectiva, iar apoi elibereaza obiectul; de exemplu, putem scrie ceva de genul "sir".length pentru a afla lungimea stringului "sir". * Vectori: literalii de tip vector sunt liste de zero sau mai multe expresii inchise intre paranteze drepte ([]), fiecare reprezentind un element din vector. Exemple: animal = ["cat", , ,"mouse", 'rabbit', 'dog'] - va avea numarul de elemente egal cu 6. * Literalii de tip Obiect sunt liste de zero sau mai multe perechi (nume proprietate, valoare asociata) inchise in interiorul acoladelor ({}). Exemple de literali de tip obiect: car = {myCar: "Saturn", getCar: CarTypes("Honda"), special: 1} este un obiect cu doua proprietati (myCar de tip string si special de tip intreg) si o metoda (CarTypes). JavaScript este un limbaj "dinamic-tipizat" sau "slab-tipizat" (loosely-typed), ceea ce inseamna ca nu trebuie sa specific tipul unei variabile cind o declar fiindca ea va fi convertita automat daca va fi nevoie in timpul executiei scriptului. O variabila se poate declara in doua moduri: * atribuindu-i o valoare: x=124 * cu ajutorul cuvintului rezervat var: var x=124 O variabila JavaScript careia nu i-a fost atribuita o valoare va avea valoarea undefined. Rezultatul evaluarii unei variabile depinde de modul in care a fost declarata: -daca variabilei nu i-a fost atribuita o valoare si a fost declarata fara var rezultatul evaluarii variabilei va fi o eroare runtime. - daca variabilei nu i-a fost atribuita o valoare, dar a fost declarata folosind cuvantul rezervat var rezultatul evaluarii variabilei va fi undefined sau NaN in context numeric. Variabilele definite in afara functiilor se numesc variabile globale si ele sunt accesibile oriunde in documentul curent. Variabilele definite in interiorul functiilor se numesc variabile locale si ele sunt vizibile numai in interiorul functiilor in care sunt declarate. II.2 Operatori Expresiile in JavaScript sunt formate din valori/literali, operatori si expresii care se evalueaza la o valoare. Valorile pot fi numerice, string sau o valoare logica. Exista trei tipuri de expresii: * aritmetice - se evalueaza la un numar * string - se evalueaza la un sir de caractere * logice - se evalueaza la true sau false Aproape toti operatorii din JavaScript sunt preluati din Java. Acestia sunt: a) operatori de atribuire: =, +=, -=, *=, /=, %=, <<=, >>=, >>>=, &=, ^=, |= b) operatori de comparare: ==, !=, >, >=, <, <= c) operatori aritmetici: %, ++, --, - d) operatori pe biti: &, |, ^, ~, >>, <<, >>> e) operatori logici: &&, ||, ! f) operatori speciali: operatorul conditional-ternar, operatorul virgula, new, this, typeof in plus fata de Java sunt operatorii: === (egal si de acelasi tip) !== (diferit si/sau de tipuri diferite), delete (sterge un obiect, o proprietate a unui obiect sau un element dintr-un vector corespunzator unui anumit index) si void . Operatorul void evalueaza o expresie fara a intoarce o valoare. El are formele: void (expresie) void expresie Ca exemplu dam codul urmator care creeaza un link care nu duce nicaieri: <A HREF="javascript:void(0)">Click here to do nothing</A> incepind cu JavaScript 1.2 avem posibilitatea sa folosim expresii regulare. Expresiile regulare sunt modele folosite pentru a verifica aparitia unor anumite combinatii de caractere in stringuri. in JavaScript aceste expresii regulare sunt obiecte si sunt folosite in conjunctie cu metodele exec si test ale clasei RegExp si cu metodele match, replace, search si split ale clasei String. O expresie regulara se construieste in urmatoarele moduri: re = /ab+c/ (fara constructor) re = new RegExp("ab+c") (cu constructor) in corpul unei expresii regulare se folosesc atit caractere simple cit si caracetere speciale de genul \,^,$,*,+,?,., (x),\r,x|y,(n,),etc. care au o semnificatie aparte. III. Instructiuni JavaScript are un set compact de instructiuni de control a fluxului imprumutat in intregime de la Java. III.1. Instructiuni conditionale (if, switch) Sintaxa este eceeasi ca in Java: if (conditie) { switch (expresie){ instructiune1 case val1 : } instructiune; [else { break; instructiune2 case val2 : } ] instructiune; break; ... default : instructiune; } III.2. Instructiuni de ciclare (for, do while, while, loop) a) for ([expresieinitiala]; [conditie]; [expresiedeincrementare]) { instructiuni } b) do { c) while (conditie) { instructiuni instructiuni } while (conditie) } d) label: instructiune e) break f) continue sau sau break label continue label III.3. Instructiuni de manipulare a obiectelor for (variable in object) { instructiuni } Aceasta instructiune nu este prezenta in limbajul Java si ea itereaza variabila specificata prin toate proprietatile unui obiect. Pentru fiecare proprietate se va executa setul de instructiuni. Lmbajul JavaScript are si instructiunea with in plus fata de Java: with (object){ instructiuni } III.4. Comentarii Comentariile sunt la fel ca in Java: pe o singura linie(//) sau pe mai multe linii(/*...*/). IV. Functii Functiile sunt blocuri de instructiuni care realizeaza un anumit task. inainte de a fi apelate (folosite) functiile trebuie definite. Locul prielnic pentru acest lucru este, in general, in partea de <head> a documentului html pentru a ne asigura ca toate functiile au fost parsate(analizate) inainte de a fi invocate de evenimente utilizator. Definirea unei functii respecta sintaxa: function nume_functie(parameters, arguments) { instructiuni } unde parameters reprezinta parametrii trimisi functiei, iar arguments sunt argumentele care pot fi trimise functiei (numarul acestora e variabil, poate sa difere de la un apel la altul). in interiorul functiei aceste argumente pot fi referite prin vectorul arguments[i] sau nume_functie.arguments[i], unde i merge de la 0 si pana la arguments.length. Parametrii sunt trimisi functiei prin valoare, deci modificari ale lor innauntru functiei nu sunt vizibile in afara, exceptind cazul cind parametrul este obiect cind modificarile din interiorul functiei sunt vizibile si in exteriorul ei. in corpul functiei poate sa apara instructiunea return daca functia trebuie sa intoarca o valoare. Exemple de functii: function power(x,n) { var rez; rez=1; for(i=1; i<=n; i++) rez=rez*x; return rez; } function myFunc(carObj) { carObj.type="Toyota" } ... mycar = {type:"Honda", model:"Accord", year:1998} x=mycar.type; myFunc(mycar); y=mycar.type; //modificarile efectuate in myFunc sunt vizibile si in apelant ... Exista in JavaScript o serie de functii predefinite: * eval(expr): evalueaza o expresie data ca si parametru (string); daca expresia este instructiune, o executa * isFinite(number) : determina daca argumentul este un numar finit; daca number=NaN returneaza false, altfel true * isNaN(testValue) : determina daca testValue este NaN * parseFloat(str) : transforma stringul str in valoare float si o returneaza * parseInt(str [, radix]) : transforma str intr-o valoare de tip intreg si o returneaza; radix este baza de numeratie * Number(obj) : converteste obj la number * String(obj) : converteste obj la string * escape/unescape(str) : folosite pentru codificare/decodificare stringuri. V. Lucrul cu obiecte Obiectele sunt structuri care inglobeaza atit date (atribute), cit si cod (metode). JavaScript are o seama de obiecte predefinite, dar ofera si posibilitatea de a creea altele noi. a) Crearea obiectelor Creearea unui obiect nou JavaScript se poate face in doua moduri: * folosind un object initializer : objectName = {property1:value1, property2:value2,..., propertyN:valueN} unde objectName este numele obiectului nou creeat, iar property1,...,propertyN sunt numele proprietatilor (atributelor), iar value1,..., valueN sunt valorile proprietatilor respective. ObjectName si operatorul de atribuire sunt optionale. Daca nu vreau sa refer acest obiect nicaieri in program, atunci nu e nevoie sa-l atribui la o variabila. Exemplu de obiect: myHonda = {color:"red", wheels:4, engine:{cylinders:4,size:2.2}} (proprietatea engine este la rindul ei un obiect) * folosind o functie constructor : aceasta metoda era folosita in versiunea 1.1 si anterioarele. Pentru a creea un obiect nou tebuie sa parcurgem doi pasi: - sa definim un tip de obiect scriind o functie constructor - sa creeam o instanta a obiectului cu operatorul new Exemplu: function car(t, m, y) { type = t model = m year = y this.displayCar=displayCar } //am definit tipul car cu proprietatile type, model, year si metoda displayCar function displayCar() { document.write("<B>"+this.type+" "+this.model+" "+this.y+</B>"); } //creeam o instanta a tipului nou definit mycar = new car("Eagle", "Talon TSi", 1993) b) Stergerea obiectelor Stergerea unui obiect se face cu instructiunea delete numeObj. c) This JavaScript, la fel ca si Java are un cuvint cheie special, this, care poate fi folosit in interiorul unei metode pentru a referi obiectul curent. Un exemplu de folosire a cuvintului rezervat this este validarea informatiei dintr-un textbox: <INPUT TYPE="text" NAME="age" SIZE=3 onChange="validate(this, 18, 99)"> unde validate este o functie care are trei parametrii dintre care primul este un obiect de tip textbox. d) Accesul la proprietati Exista doua modalitati prin care pot sa accesez proprietatile unui obiect: fie prin numele proprietatii (obj.property), fie printr-un index (obj[index_property]). Fiecarei proprietati a unui obiect i se atasaza un index la creearea obiectului; se pleaca de la indexul zero si se atribuie fiecarei proprietati/cimp (in ordinea in care sunt definite) un index unic. Daca proprietatea pe care o doresc este a i-a proprietate definita, atunci eu pot sa-i accesez valoarea prin constructia: obj[i]. e) Obiecte predefinite Exista in JavaScript urmatoarele obiecte predefinite (pe linga cele care tin de browser) : Array, Boolean, Function, Date, Math, Number, RegExp, String, fiecare avind propriile metode. g) JavaScript - "prototype-based language" JavaScript nu este un limbaj "class-based" la fel ca C++ si Java ci este un limbaj "prototype-based", adica nu face distinctia intre clasa si instanta a unei clase, el are doar conceptul de obiect. in centru unui limbaj "prototype-based" sta notiunea de prototypical object care este un obiect folosit ca si template pentru a obtine proprietatile initiale ale unui obiect nou. Orice obiect poate sa-si specifice proprietatile fie la creare, fie la run-time. in plus, orice obiect existent poate fi asociat ca si prototype pentru alt obiect, permitind celui de-al doilea sa partajeze proprietatile cu primul (sa aiba aceleasi proprietati ca si primul). JavaScript permite si operatia de mostenire intre clase. JavaScript implementeaza mostenirea prin faptul ca permite utilizatorului sa asocieze un obiect prototypical unei functii constructor. Implementam pentru exemplificare urmatoarea ierarhie de clase: Employee -String name -String dept Manager WorkerBee [] reports [] projects Vom scrie, pentru o mai buna intelegere, doua implementari ale ierarhiei de clase de mai sus, una in Java si cealalta in JavaScript: JavaScript Java Function Employee () { this.name = ""; this.dept = "general"; } public class Employee { public String name; public String dept; public Employee () { this.name = ""; this.dept = "general"; } } Function Manager () { this.reports = []; } Manager.prototype = new Employee; function WorkerBee () { this.projects = []; } WorkerBee.prototype = new Employee; public class Manager extends Employee { public Employee[] reports; public Manager () { this.reports = new Employee[0]; } } public class WorkerBee extends Employee { public String[] projects; public WorkerBee () { this.projects = new String[0]; } } in JavaScript se pot adauga la run-time metode la orice obiect creat: Obj.newprop="sss"; JavaScript nu suporta mostenire multipla. VI. JavaScript si html Scripturile JavaScript pot fi introduse in documentele html prin patru modalitati: 1) ca si instructiuni sau functii scrise in interiorul unui tag <SCRIPT> <SCRIPT LANGUAGE="Javascript"> JavaScript statements... </SCRIPT> 2) specificind un fisier sursa JavaScript (fisier cu extensia js) <SCRIPT SRC="common.js"> </SCRIPT> 3) specificind o expresie JavaScript ca valoare a unui atribut html <HR WIDTH="&{barWidth};%" ALIGN="LEFT"> <H4>&{myTitle};</H4> Entitatile JavaScript incep cu "&" si se termina cu ";" si sunt cuprinse in interiorul acoladelor 4) ca handler de eveniment pentru elemente ale unui formular <INPUT TYPE="button" VALUE="Press Me" onClick="functie()"> VII. Lucrul cu evenimente Majoritatea scripturilor JavaScript sunt orientate pe evenimente. Evenimentele sunt actiuni ale utilizatorului asupra documentului html. Exemple de evenimente sunt: click-ul pe un buton, editarea unui camp de tipul text, mutarea mouse-ului peste un link, etc. Pentru fiecare astfel de eveniment se pot defini handlere de evenimente care sunt functii javascript sau secvente de instructiuni care se vor executa atunci cand evenimentul respectiv are loc. Evenimentele (si handlerele de evenimente) care se pot folosi sunt predefinite si sunt urmatoarele: Evenimentul Cui se aplica Cand are loc Handlerul de ev. Abort Image oprirea incarcarii unei imagini OnAbort Blur Window si elem. ale obiectului Form pierderea focusului OnBlur Change Text, TextArea, Select schimbarea valorii unui element OnChange Click Button, Checkbox, Link, Radio, Submit, Reset utilizatorul face click OnClick DragDrop Window plasarea unui obiect pe fereastra browserului OnDragDrop Error Image, Window eroare la incarcarea obiectului OnError Focus Window si elem. ale obiectului Form elementul capata focus OnFocus KeyDown Document, Image, Link, TextArea apasarea unei taste OnKeyDown KeyPress Document, Image, Link, TextArea apasarea sau mentinerea apasata a unei taste OnKeyPress KeyUp Document, Image, Link, TextArea eliberarea unei taste OnKeyUp Load Document incarcarea paginii in navigator OnLoad MouseDown Document, Button, Link apasarea butonului de mouse OnMouseDown MouseMove Nici unui obiect mutarea cursorului OnMouseMove MouseOut Area, Link mutarea cursorului de mouse in afara ob. OnMouseOut MouseOver Link mutarea cursorului peste un link OnMouseOver MouseUp Document, Button, Link eliberarea butonului de mouse OnMouseUp Move Window deplasarea ferestrei OnMove Reset Form click pe butonul reset OnReset Resize Window redimensionarea ferestrei OnResize Select Text, TextArea selectarea unui elem. al campului onSelect Submit Form apasarea pe submit onSubmit Unload Document parasirea paginii onUnload Un handler de evenimente este asociat unui tag html. Asocierea se poate face fie cand se specifica tagul html, fie mai tarziu prin cod javascript. In primul caz, sintaxa generala de definire a unui eveniment este urmatoarea: <TAG eventHandler="JavaScript Code"> unde TAG este tagul html pentru care se va defini handlerul, eventHandler este unul din handlerele definite in tabelul de mai sus, iar "JavaScript Code" este o secventa de instructiuni javascript separate prin ";" sau numele unei functii javascript. Pentru cel de-al doilea caz, forma generala este urmatoarea: <SCRIPT LANGUAGE="JavaScript"> ... obj.eventHandler="JavaScript Code"; ... </SCRIPT> unde obj este numele obiectului javascript (asociat unui anumit tag) caruia i sa asociaza handlerul de evenimente, iar eventHandler si "JavaScript code" au aceleasi semnificatii ca si in primul caz. Dam in liniile urmatoare cateva exemple de lucru cu evenimente: * pentru un buton se defineste un handler pentru evenimentul onClick: ... <head> <SCRIPT> function calc(f) { ... } </SCRIPT> </head> ... <INPUT TYPE="button" VALUE="Calculeaza" onClick="calc(this.form)"> Cand utilizatorul va face click pe buton se va apela functia calc (definita in sectiunea head) cu parametrul this.form care este forma curenta in care este definit butonul. * Pentru un anumit link (myLink din frame-ul myFrame al documentului), la trecerea mouse-ului peste el se va deschide o noua fereastra care va contine documentul mydoc.html: Document.myFrame.MyLink.onMouseOver="window.open('mydoc.html', 'newWin')"; Fiecare eveniment are asociat un obiect event care va contine informatii despre evenimentul respectiv ca tipul evenimentului, pozitia cursorului, etc. De pilda, in cazul evenimentului onMouseDown obiectul event va contine tipul evenimentului ("onMouseDown"), pozitia pe axa Ox si Oy a cursorului de mouse, un numar care reprezinta butonul mouse-ului folosit si un camp care va contine eventuali modificatori (Control, Alt, Shift, ..). Cand are loc un eveniment pentru care s-a definit un handler, obiectul event este trimis handler-ului ca si argument, iar executia este cedata handler-ului de eveniment. Una dintre cele mai frecvente utilizari ale evenimentelor este validatea datelor inainte de a fi trimise la server. Vom prezenta un exemplu: <SCRIPT> function PosNum(nr) { if (parseInt(s) < 0) alert("Trebuie sa introduceti un numar pozitiv!"); } </SCRIPT> ... <Form ...> ... <input type="text" name="Varsta" onBlur="PosNum(this.value)"> ... </Form> VIII. Obiecte client-side JavaScript Aceste obiecte client-side JavaScript se mai numesc si obiecte Navigator pentru a le distinge de obiectele server-side si de obiectele definite de utilizator. Ele sunt create de catre si in interiorul navigatorului atunci cand se incarca o pagina html si reflecta structura ferestrei navigatorului si a documentului html. Astfel, obiectele navigator sunt aranjate intr-o ierarhie conform acestei structuri. Aceasta ierarhie este prezentata in figura de mai jos: Ierarhia Window Object In aceasta ierarhie, descendentii unui obiect sunt de fapt proprietati pentru acel obiect. In general, daca un obiect obj1 are un fiu obj2 care la randul lui este parinte pentru obj3, ma refer la proprietatea prop a obiectului obj3 prin constructia: obj1.obj2.obj3.prop Fiecare pagina are urmatoarele obiecte: * navigator : proprietati despre numele si versiunea navigatorului, tipuri MIME, plug-inuri instalate pe client * window : proprietati aplicabile intregii ferestre * document : proprietati ale documentului (titlu, background, links, forms) * location : proprietati bazate pe URI-ul curent * history : proprietati reprezentand URI-urile pe care le-a vizitat clientul Multe dintre obiectele Navigator au proprietati care sunt vectori. Iterarea in acesti vectori se poate face fie folosind indici numerici ordinali sau folosind numele obiectelor din vector specificate in interiorul operatorului de indexare, "[]". VIII.1. Obiectul Navigator Obiectul Navigator contine informatii despre versiunea navigatorului folosita. Proprietatile acestui obiect sunt: * appCodeName : numele codului browserului (pt. Netscape 2.0 sau mai recent proprietatea va avea valoarea Mozilla) * appName : numele browserului * appVersion : versiunea navigatorului * language : limbajul in care navigatorul afisaza informatii pt. utilizator (en, ro, etc.) * mimeTypes : vector cu tipurile MIME suportate de client * platform : platforma pentru care a fost compilat navigatorul * plugins : vector cu plug-in-urile instalate la client * userAgent : valoarea antetului user-agent care este trimisa prin protocolul HTTP de la client la server Toate aceste proprietati sunt read-only. Metodele mai importante pe care le expune obiectul Navigator sunt urmatoarele: > javaEnabled : testeaza daca JVM-ul din navigator este activat > plugins.refresh : vectorul plugins are metoda refresh care poate fi apelata cu un parametru boolean (true sau false) si care face accesibile plugin-uri noi instalate, actualizeaza vectorul plugins si reincarca documentele deschise care contin plugin-uri > preference : seteaza sau obtine valori pentru diferite preferinte ale navigatorului. Se apeleaza cu un parametru care spune preferinta (valori predefinite: security.enable_java, etc.) si un parametru care poate fi string, numar sau boolean si care specifica valoarea care va fi atribuita preferintei respective. > savePreferences : salveaza preferintele navigatorului in fisierul local prefs.js > taintEnabled : specifica daca navigatorul va verifica codul pentru a se asigura ca nu este infectat de cod rauvoitor Exemplu de utilizare: document.write("Numele browserului e"+navigator.appName); document.write("Versiunea:"+navigator.appVersion); VIII.2. Obiectele Window si Frame Un obiect Window reprezinta o fereastra de browser sau un frame si este parintele tuturor obiectelor definite in navigator. Un obiect Frame este definit prin tag-ul html FRAME in interiorul unui tag FRAMESET. Obiectele Frame si Windows au aceleasi proprietati si metode. Cele mai importante proprietati ale lor sunt: * closed : specifica daca o fereastra a fost inchisa * defaultStatus : contine textul implicit afisat in bara de stare a ferestrei * status : contine textul afisat in bara de stare * document : obiect de tipul Document asociat documentului html afisat in fereastra * frames : vector cu toate frame-urile din fereastra browserului * length : numarul de frame-uri din fereastra * history : obiect History asociat ferestrei * innerHeight, innerWidth : dimensiunea verticala si orizontala, in pixeli, a partii de afisare a ferstrei * location : obiect de tip Location asociat ferestrei * menubar, locationbar, scrollbars, statusbar, toolbar, personalbar : obiecte asociate barelor de meniu, de locatie, de scroll, de stare, de unelte, personala, ale ferestrei si care au o singura proprietate, visible, care poate avea doar doua valori, true si false; daca e true bara respectiva se va afisa, altfel, nu. * name : un nume unic pentru fereastra (string) * parent : parintele ferestrei * screenX, screenY : coordonatele OX si OY ale ferestrei pe desktop * self, window : sinonime pentru fereastra curenta * top : sinonim pentru prima fereastra a browserului. Pentru un obiect de tipul Window se pot defini urmatoarele handlere de evenimente: onBlur, onDragDrop, onError, onFocus, onLoad, onMove, onResize si onUnload. Metodele mai importante ale acestui obiect sunt: > alert : are ca parametru un string si afiseaza stringul respectiv intr-o fereastra cu un buton OK > back : echivalentul apasarii butonului BACK al navigatorului > blur : elibereaza focus-ul > close : inchide fereastra respectiva > confirm : are ca parametru un string si afiseaza stringul respectiv intr-o fereastra cu un buton OK si unul CANCEL. Metoda returneaza true daca utilizatorul a facut click pe OK sau false in caz contrar > find : cauta un string pe care-l primeste ca si parametru in continutul ferestrei. Metoda mai poate primi ca parametru caseSensitive (cautarea nu va tine cont de litere mari sau mici) si backward (cautarea va fi efectuata inapoi). Metoda intoarce true daca stringul respectiv este gasit. > focus : da focus-ul ferestrei > forward : echivalentul apasarii butonului FORWARD al navigatorului > home : echivalentul apasarii butonului HOME al navigatorului > moveBy, moveTo : amandoua primesc ca parametrii doua valori intregi si muta fereastra conform valorilor parametrilor; moveBy efectueaza o miscare relativa, iar moveTo una absoluta > resizeBy, resizeTo : la fel ca si metodele de mai sus, numai ca redimensionaeaza fereastra, nu o muta > print : printeaza continutul ferestrei > prompt : afiseaza o fereastra cu butoanele OK si CANCEL si un mesaj primit ca si parametru si un textbox unde se pot introduce valori (textboxul poate avea o valoare implicita specificata prin al doilea parametru). Metoda intoarce textul introdus de utilizator > scrollTo : face scroll la pagina la coordonatele X si Y specificate prin parametrii > setResizable : specifica daca fereastra se poate redimensiona prin valoarea parametrului de intrare (true sau false) > stop : opreste download-ul curent > open : deschide o noua fereastra Deschiderea si inchiderea ferestrelor Deschiderea si inchiderea ferestrelor navigator se poate face fie folosind comenzile din meniul FILE, fie prin cod javascript. Deschiderea unei ferestre din cod javascript se face cu ajutorul apelului open. Apelul open este cel mai complex intre cele prezentate mai sus. Sintaxa lui generala este: window open(URL, numewin, winfeatures) unde: -URL este un nume de fisier local sau un URL (string) -numewin este un string reprezentand numele ferestrei. Acest nume poate apare in atributul TARGET al tag-ului <FORM> sau in tag-ul <A> de link -winfeatures este un string reprezentand o lista de proprietati standard ale ferestrelor navigator, separate prin virgula. Apelul open intoarce totdeauna un obiect de tip window care va putea fi folosit mai departe in apelarea altor metode. Datorita regulilor de vizibilitate a obiectelor din javascript, un apel open() fara specificarea obiectului window este echivalent cu un apel document.open(). Cu apelul open se pot deschide ferestre navigator noi, dar el poate fi folosit si pentru obtinerea de referinte la ferestre deja existente. Propietatile ferestrelor care pot fi specificate prin al treilea parametru sunt urmatoarele: - alwaysLowered : daca este setat pe 'yes', fereastra nou creata va fi dedesubtul celorlalte ferestre, indiferent daca este activa sau nu - alwaysRaised : daca este setat pe 'yes', fereastra nou creata va fi totdeauna deasupra celorlalte ferestre, indiferent daca este activa sau nu - dependent : daca este 'yes', fereastra va fi creeata ca si fiu al ferestrei curente, astfel ca o astfel de fereastra va fi inchisa cand parintele ei se inchide; in SO Windows, ferestrele dependente nu apar in task bar - directories : daca este setat pe 'yes', fereastra va contine butoane pentru directoare (What's New, What's cool, etc.) - height : specifica inaltimea ferestrei in pixeli - hotkeys : daca este setat pe 'no', dezactiveaza majoritatea acceleratorilor (CTRL-F, CTRL-O, etc.) intr-o fereastra fara bara de meniu - innerHeight : specifica inaltimea in pixeli a continutului ferestrei; inlocuieste height care este mentinut pentru compatibilitate cu versiunile precedente - innerWidth : specifica latimea in pixeli a continutului ferestrei; inlocuieste width care este mentinut pentru compatibilitate cu versiunile precedente - location : daca este setata pe 'yes', noua fereastra va contine campul de location - menubar : daca este setat 'yes', fereastra va contine o bara de meniuri - outerHeight : specifica dimensiunea verticala, in pixeli, a ferestrei - personalbar : daca este 'yes', noua fereastra va avea o bara Personal (cu bookmark-uri) - resizable : specifica daca utilizatorul poate redimensiona fereastra - screenX : specifica distanta pozitiei ferestrei fata de marginea din stanga a ecranului - screenY : specifica distanta pozitiei ferestrei fata de marginea din dreapta a ecranului - scrollbars : daca este setat pe 'yes', fereastra va afisa bare de scroll atunci cand dimensiunile documentului care e afisat, va depasi dimensiunile ferestrei - status : daca este 'yes', fereastra va avea o bara de stare in partea inferioara - titlebar : daca este 'yes', fereastra va avea o bara de titlu - toolbar : daca este 'yes', fereastra va avea o bara de unelte (cu butoanele Back, Forward, etc.) - width : specifica latimea ferestrei in pixeli - z-lock : daca este setat pe 'yes', noua fereastra nu se va ridica deasupra celorlalte atunci cand este activata Majoritatea proprietatilor de mai sus pot avea doua valori: 'yes' sau 'no'. In loc de 'yes', insa, se poate pune 1 si in loc de 'no', 0, valorile fiind echivalente. De asemenea, pentru activarea unei proprietati este de ajuns sa se specifice proprietatea respectiva in lista winfeatures, fara nici o valoare. Astfel, urmatoarele trei instructiuni sunt echivalente si toate trei deschid o fereastra cu numele messageWindow in care proprietatile toolbar,titlebar si hotkeys sunt activate, iar celelalte cu valori 'yes/no' sunt dezactivate: open("", "messageWindow", "toolbar") open("", "messageWindow", "toolbar=yes") open("", "messageWindow", "toolbar=1") Daca fereastra deschisa este una noua (parametrul numewin nu specifica o fereastra existenta) si nu se specifica parametrul winfeatures, toate proprietatile care au valori 'yes/no' vor avea valoarea implicita 'yes'. Daca in schimb, este specificat parametrul winfeatures, atunci proprietatile titlebar si hotkeys au valoarea implicita 'yes', iar celelalte au 'no'. Dupa ce s-a deschis o noua fereastra, proprietatile standard ale ferestrei nu se mai pot modifica din cod javascript. Exemple de folosirea metodei open: open("http://www.google.com") -deschide intr-o noua fereastra navigator URL-ul http://www.google.com open("index.html") -deschide intr-o noua ferestra navigator documentul index.html de pe discul local open("http://www.netscape.com","netscapeWin","toolbar=yes,menubar,statusbar,width=200") -deschide intr-o noua fereastra cu o bara de titlu, hotkeys, o bara de unelte, o bara de meniuri, o bara de stare si latimea de 200 de pixeli, cu numele netscapeWin, URL-ul http://www.netscape.com open("") -deschide o fereastra goala win=open("","netscapeWin") -obtine o referinta, win - obiect de tip windows, la fereastra cu numele netscapeWin msgWindow=window.open("","displayWin","menubar=yes") msgWindow.document.write("<HEAD><TITLE>Message window</TITLE></HEAD>") msgWindow.document.write("<CENTER><BIG><B>Hello, world!</B></BIG></CENTER>") msgWindow.status="Hello" -deschide o noua fereastra goala cu numele displayWin, cu bara de titlu, cu hotkeys, cu bara de meniuri, in care scrie boldat, cu caractere mari si centrat, 'Hello world!'; bara de stare va contine textul 'Hello' ... <input type="button" name="bPrint" value="Print" onClick="win=window.open('www.google.com'); win.print()"> ... -la click pe buton se va deschide o fereastra noua, careia ii va fi listat continutul Ferestrele navigator pot avea doua nume. Primul nume este numele obiectului window pe care-l intoarce metoda open si care contine informatii despre proprietatile ferestrei, metode, etc. Un al doilea nume al ferestrei poate fi specificat prin al doilea parametru al metodei open. Acest al doilea nume poate fi folosit ca si tinta (fereastra destinatie) pentru tag-urile <FORM> si <A>. Numele ferestrei nu e o cerinta obligatorie cand creezi fereastra, dar este in cazul in care vreau sa ma refer la aceasta fereastra din interiorul altei ferestre navigator. Exemplu de folosire a numelui unei ferestre in cadrul tag-ului <A>: ... <input type="button" value="New" onClick="window.open('','win')"> ... <A href="http://java.sun.com" TARGET="win">Java</A> Referirea/apelul la proprietatile/metodele unei ferestre navigator se face prin sintaxa obwin.camp, unde camp este numele unei proprietati/metode, iar obwin poate fi una din urmatoarele: * self, windows : se refera la fereastra curenta * obwin poate sa nu apara (sa fie vid), caz in care proprietatile/metodele se refera la fereastra curenta * top : se refera la prima fereastra navigator, parintele tuturor celorlalte * parent : poate fi folosit pentru frame-uri si semnifica fereastra navigator cu tagul <FRAMESET> care contine frame-ul curent * numele unui obiect window intors de apelul open Obiectul Frame se foloseste exact ca obiectul Window (are aceleasi proprietati, metode si evenimente) cu urmatoarea completare: daca win este un obiect fereastra ce contine un frame cu numele frm1 (atributul NAME din tag-ul <FRAME> este "frm1"), ma refer la frame-ul frm1 prin constructiile win.frames[i], unde i este numarul de ordine al frame-lui frm1 in cadrul tag-ului <FRAMESET> sau prin win.frm1. Una dintre cele mai importante proprietati ale obiectului window este document care este obiectul de tipul document deschis in fereastra respectiva si despre care vom vorbi mai jos. VIII.3. Obiectul Location Obiectul Location reprezinta URL-ul asociat unui obiect Window si fiecare proprietate a lui reprezinta o portiune din URL. Proprietatile obiectului location sunt urmatoarele: * hash : specifica un string din URL care incepe cu "#" si reprezinta un link in interiorul documentului * host :numele sau IP-ul host-ului asa cum este specificat in URL * hostname : specifica partea "hostname:port" din URL * href : specifica intreg URL-ul * pathname : specifica partea din cale (spre fisiere) din URL * port : portul pe care asculta serverul * protocol : specifica protocolul din URL * search : specifica un query (cand se trimit parametrii) Metodele obiectului sunt: > reload : reincarca documentul din fereastra curenta > replace : scrie URL-ul documentului peste inregistrarea curenta din history Exemplu de utilizare: window.location.href="http://www.google.com"; (sau window.location="http://www.google.com") window.location.reload(); Acest cod javascript schimba URL-ul paginii si incarca noul URL. VIII.4. Obiectul History Obiectul History contine o lista de stringuri reprezentand toate URL-urile pe care clientul le-a vizitat. Lista history a unei ferestre poate fi accesata si prin vectorul window.history[]. Proprietatile acestui obiect sunt: * current : specifica URL-ul inregistrarii curente din lista * next : specifica numarul de intrari din lista * length : specifica URL-ul urmatoarei inregistrari din lista * previous : specifica URL-ul inregistrarii precedente din lista Iar metodele: > back : face aceeasi actiune ca si butonul BACK al browserului > forward : face alelasi lucru ca si butonul FORWARD al browserului > go : se apeleaza impreuna cu un parametru, intreg sau string. Daca este intreg si este 0, metoda reincarca URL-ul curent, daca este negativ, metoda se deplaseaza in lista history cu atatea pozitii inapoi si incarca URL-ul respectiv, iar daca intregul e pozitiv, face acelasi lucru numai ca se deplaseaza in lista inainte. Daca parametrul este un string, go incarca URL-ul din history care contine acest string (cea mai buna potrivire) Exemple: history.go(-3) parent.frames[1].history.back() window2.history.back() VIII.5. Obiectul Document Obiectul Document contine informatii despre documentul curent si ofera metode pentru afisarea codului html in fereastra browserului. Acest obiect este creat de catre navigator cand se incarca o pagina si este asociat tag-ului <BODY>. Evenimentele pe care obiectul le poate receptiona sunt: onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseUp. Principalele proprietati sunt urmatoarele: * alinkColor : specifica culoarea unui link activ (valoarea atributului ALINK) * anchors : un vector care contine cate o intrare pentru fiecare link (tag <A>); elementele sunt de tipul anchor * applets : vector ce contine cate o intrare pentru fiecare applet din document; elementele sunt de tipul applet * bgColor : string ce specifica culoarea de backgroud (atributul BGCOLOR) * cookie :string ce reprezinta toate cookie-ele asociate cu documentul curent * embeds : un vector ce contine toate obiectele (plug-in-uri) incluse in documentul curent (cu tag-ul EMBED) * fgColor : string ce specifica culoarea de foreground * formName : obiectul document contine cate o intrare de tipul Form pentru fiecare forma din document, iar numele proprietatii este chiar numele formularului (valoarea atributului NAME din tagul <FRAME>) * forms : un vector ce contine elemente de tipul form pentru fiecare formular din document * height : inaltimea documentului in pixeli * width : latimea documentului in pixeli * ids : creeaza un obiect style care poate fi folosit pentru tag-uril html * images : un vector ce contine cate o intrare pentru fiecare imagine (<IMG>) din document; elementele sunt de tipul image * layers : un vector cu elemente de tip layer si cu cate o intrare pentru fiecare layer definit in document * linkColor : string ce specifica culoarea link-urilor * links : un vector ce contine cate o intrare (de tip link) pentru fiecare link din document * plugins : un vector cu toate plugin-urile din codul html; sunt de tip plugin * referrer : contine URL-ul de la care s-a ajuns pe acesta pagina * title : titlul documentului * URL : URL-ul documentului * vlinkColor : culoarea link-urilor vizitate Toate campurile vector de mai sus pot sa le indexez fie cu indecsi intregi plecand de la 0, fie cu indecsi de tip nume (care apar ca valori ale atributului NUME din html). Astfel document.frames[1] este echivalent cu document.frames["frm1"], daca frm1 este frame-ul cu indice 1 din frameset. Iar metodele principale sunt: > close : inchide un stream de iesire deschis cu metoda open si afisaza documentul html utilizatorului > open : deschide un stream pentru scriere cu metodele write si writeln > write, writeln : scrie una sau mai multe expresii separate prin virgula in documentul din fereastra specificata Exemple de utilizare: 1) vom face un buton pe care daca facem click se va schimba o imaginea 'i' din document: <html> <body> <img src="b.gif" name="i"> <br> <input type=button value"change" onClick="document.images['i'].src='a.jpg'"> </body> </html> 2) scriem o functie care scrie in document un "Hello world!" si un tag de paragraf: function windowWriter1() { var myString = "Hello, world!" msgWindow.document.open() msgWindow.document.write(myString + "<P>") msgWindow.document.close() } 3) afisarea valorilor unor campuri de tip text: <Form name="statform" action="a.html"> <input type="text" width=20 name="userName"> <input type="text" width=20 name="Age"> .... <SCRIPT> document.write(document.statform.userName.value) document.write(document.statform.Age.value) </SCRIPT> .... VIII.6. Obiecte predefinite asociate tag-urilor: Proprietatile celorlalte obiecte din ierarhia Window Object de mai sus se bazeaza pe continutul documentului HTML (se mai spune ca ele 'reflecta' continutul html). Astfel obiectele sunt asociate tag-urilor html din document, dupa urmatorul tabel: Layer <LAYER> Link <A> SAU <AREA> Image <IMG> Area <AREA> Anchor <A> Applet <APPLET> Form <FORM> Textarea <TEXTAREA> Text <INPUT TYPE="TEXT"> FileUpload <INPUT TYPE="FILE"> Password <INPUT TYPE="PASSWORD"> Hidden <INPUT TYPE="HIDDEN"> Submit <INPUT TYPE="SUBMIT"> Reset <INPUT TYPE="RESET"> Radio <INPUT TYPE="RADIO"> Checkbox <INPUT TYPE="CHECKBOX"> Button <INPUT TYPE="BUTTON"> Select <SELECT> Proprietatile acestora sunt, in general, echivalente atributelor tag-urilor care le corespund, in sensul ca au acelasi nume si aceeasi semnificatie, iar metodele cele mai importante sunt: click, blur si focus. Pentru obiectele care sunt asociate tag-urilor <INPUT> acestea mai contin o proprietate cu formularul (obiectul form) din care fac parte. Tag-urile de acelasi tip se deosebesc intre ele prin valoarea atributului NAME. Fara a mai insista pe aceste obiecte, vom da mai jos cateva exmple edificatoare: 1) Vrem ca la mutarea mouse-ului deasupra unei imagini, aceasta sa se schimbe (sa apara alta), iar cand parasim cu cursorul mouse-ului cadrul imaginii, aceasta sa redevina cea initiala: ... <IMG SRC="prima.jpg" NAME="img1" onMouseOver="document.img1.src='adoua.jpg'" onMouseOut=" document.img1.src='prima.jpg'"> ... 2) O pagina cu validarea continutului unui textbox care nu poate avea mai mult de 5 caractere: <html><head> <script type="text/javascript"> function validate() { x=document.myForm input=x.myInput.value if (input.length>5) { alert("Do not insert more than 5 characters") return false } else { return true } } </script> </head> <body> <form name="myForm" action="tryjs_submitpage.htm" onsubmit="return validate()"> In this input box you are not allowed to insert more than 5 characters: <input type="text" name="myInput"> <input type="submit" value="Send input"> </form> </body> </html> 